{% extends 'base.html' %}

{% block title %}系统概览 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}系统概览{% endblock %}

{% block extra_css %}
<style>
    .dashboard-stats {
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.primary { border-left-color: #007bff; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }
    .stat-card.warning { border-left-color: #ffc107; }
    .stat-card.danger { border-left-color: #dc3545; }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-icon.primary { color: #007bff; }
    .stat-icon.success { color: #28a745; }
    .stat-icon.info { color: #17a2b8; }
    .stat-icon.warning { color: #ffc107; }
    .stat-icon.danger { color: #dc3545; }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
        line-height: 1;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 0.5rem;
    }

    .stat-change {
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }

    .stat-change.positive { color: #28a745; }
    .stat-change.negative { color: #dc3545; }

    .dashboard-section {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: #2c3e50;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #007bff;
    }

    .campus-card {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .campus-card:hover {
        border-color: #007bff;
        box-shadow: 0 2px 10px rgba(0,123,255,0.1);
    }

    .campus-name {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .campus-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .campus-stat {
        text-align: center;
        flex: 1;
    }

    .campus-stat-number {
        font-size: 1.5rem;
        font-weight: 600;
        color: #007bff;
    }

    .campus-stat-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
    }

    .user-list {
        max-height: 400px;
        overflow-y: auto;
    }

    .user-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 1px solid #f8f9fa;
        transition: background-color 0.3s ease;
    }

    .user-item:hover {
        background-color: #f8f9fa;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #007bff, #0056b3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .user-info {
        flex: 1;
    }

    .user-name {
        font-weight: 500;
        color: #2c3e50;
        margin: 0;
    }

    .user-meta {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    .user-role {
        padding: 0.25rem 0.5rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-left: auto;
    }

    .role-super-admin { background: #dc3545; color: white; }
    .role-campus-admin { background: #007bff; color: white; }
    .role-coach { background: #28a745; color: white; }
    .role-student { background: #17a2b8; color: white; }

    .quick-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1;
        min-width: 200px;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        text-decoration: none;
    }

    .btn-primary-custom {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
    }

    .btn-success-custom {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
    }

    .btn-info-custom {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
    }

    .alert-info {
        background-color: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
        border-radius: 10px;
    }

    @media (max-width: 768px) {
        .campus-stats {
            flex-direction: column;
            gap: 0.5rem;
        }

        .campus-stat {
            width: 100%;
        }

        .quick-actions {
            flex-direction: column;
        }

        .quick-action-btn {
            min-width: auto;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% if error %}
        <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
        </div>
    {% else %}
        <!-- 系统统计卡片 -->
        <div class="dashboard-stats">
            <div class="row g-3">
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card primary">
                        <div class="stat-icon primary">
                            <i class="bi bi-building"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_campuses or 0 }}</h3>
                        <div class="stat-label">活跃校区</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card success">
                        <div class="stat-icon success">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_users or 0 }}</h3>
                        <div class="stat-label">总用户数</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card info">
                        <div class="stat-icon info">
                            <i class="bi bi-mortarboard"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_students or 0 }}</h3>
                        <div class="stat-label">活跃学员</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card info">
                        <div class="stat-icon info">
                            <i class="bi bi-person-check"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_coaches or 0 }}</h3>
                        <div class="stat-label">认证教练</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card warning">
                        <div class="stat-icon warning">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.pending_coaches or 0 }}</h3>
                        <div class="stat-label">待审核教练</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card primary">
                        <div class="stat-icon primary">
                            <i class="bi bi-arrow-left-right"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_relations or 0 }}</h3>
                        <div class="stat-label">师生关系</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 今日统计 -->
        {% if today_stats %}
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-calendar-day"></i>今日数据
            </h4>
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stat-number text-success">{{ today_stats.new_students or 0 }}</div>
                        <div class="stat-label">新注册学员</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stat-number text-info">{{ today_stats.new_coaches or 0 }}</div>
                        <div class="stat-label">新申请教练</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stat-number text-primary">{{ today_stats.today_reservations or 0 }}</div>
                        <div class="stat-label">今日预约</div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="row">
            <!-- 校区概览 -->
            <div class="col-lg-8">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-building"></i>校区概览
                    </h4>

                    {% if campuses %}
                        {% for campus_info in campuses %}
                        <div class="campus-card">
                            <div class="campus-name">{{ campus_info.campus.name }}</div>
                            <div class="text-muted mb-2">{{ campus_info.campus.address }}</div>
                            <div class="campus-stats">
                                <div class="campus-stat">
                                    <div class="campus-stat-number">{{ campus_info.students_count }}</div>
                                    <div class="campus-stat-label">学员</div>
                                </div>
                                <div class="campus-stat">
                                    <div class="campus-stat-number">{{ campus_info.coaches_count }}</div>
                                    <div class="campus-stat-label">教练</div>
                                </div>
                                <div class="campus-stat">
                                    <div class="campus-stat-number">{{ campus_info.tables_count }}</div>
                                    <div class="campus-stat-label">球台</div>
                                </div>
                                <div class="ms-auto">
                                    <a href="{{ url_for('campus.detail', id=campus_info.campus.id) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-eye me-1"></i>查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-building" style="font-size: 3rem; opacity: 0.3;"></i>
                            <p class="mt-2">暂无校区数据</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 最近注册用户 -->
            <div class="col-lg-4">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-person-plus"></i>最近注册用户
                    </h4>

                    {% if recent_users %}
                        <div class="user-list">
                            {% for user in recent_users %}
                            <div class="user-item">
                                <div class="user-avatar">
                                    {% if user.photo_url %}
                                        <img src="{{ user.photo_url }}" alt="{{ user.real_name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                    {% else %}
                                        {{ user.real_name[0] if user.real_name else 'U' }}
                                    {% endif %}
                                </div>
                                <div class="user-info">
                                    <p class="user-name">{{ user.real_name }}</p>
                                    <p class="user-meta">{{ user.created_at.strftime('%m-%d %H:%M') if user.created_at else '' }}</p>
                                </div>
                                <div class="user-role role-{{ user.role }}">
                                    {% if user.role == 'super_admin' %}超级管理员
                                    {% elif user.role == 'campus_admin' %}校区管理员
                                    {% elif user.role == 'coach' %}教练
                                    {% elif user.role == 'student' %}学员
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-person" style="font-size: 3rem; opacity: 0.3;"></i>
                            <p class="mt-2">暂无用户数据</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-lightning"></i>快捷操作
            </h4>
            <div class="quick-actions">
                <a href="{{ url_for('campus.create') }}" class="quick-action-btn btn-primary-custom">
                    <i class="bi bi-plus-circle me-2"></i>创建新校区
                </a>
                <a href="{{ url_for('coaches.list') }}" class="quick-action-btn btn-success-custom">
                    <i class="bi bi-person-check me-2"></i>审核教练申请
                </a>
                <a href="{{ url_for('students.list') }}" class="quick-action-btn btn-info-custom">
                    <i class="bi bi-people me-2"></i>用户管理
                </a>
            </div>
        </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动刷新统计数据
    setInterval(function() {
        fetch('/api/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新统计数据（可选实现）
                console.log('Stats updated:', data.stats);
            }
        })
        .catch(error => console.error('Error fetching stats:', error));
    }, 30000); // 每30秒刷新一次

    // 添加卡片点击效果
    document.querySelectorAll('.stat-card').forEach(card => {
        card.addEventListener('click', function() {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
});
</script>
{% endblock %}